<template>
    <div class="item" :class="{active:isActive}" @click="changeActive">
        <Card style="width:320px">
        <div style="text-align:center">
            <Tag class="tag" color="#FFA2D3">{{ cardInfo.tag }}</Tag>
            <img :src="cardInfo.imgUrl">
            <h3 style="text-align: left;">{{ cardInfo.title }}</h3>
            <div class="opration">
                <Button  shape="circle" icon="md-create"></Button>
                <Button  shape="circle" icon="ios-brush-outline"></Button>
                <Button  shape="circle" icon="ios-cloud-upload-outline"></Button>
                <Button  shape="circle" icon="md-share"></Button>
                <Button  shape="circle" icon="md-trash" @click="deleteInfo"></Button>
            </div>
        </div>
    </Card>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
    name: 'card',
    data() {
        return {

        }
    },
    props: {
        isActive: {
            type: Boolean,
            default: false,
        },
        cardInfo: {
            type: Object,
            default: () => ({
                tag: 'card',
                imgUrl: 'https://dev-file.iviewui.com/stJXDnKhL5qEBD0dHSDDTKbdnptK6mV5/large',
                title: '标题',
            }),
        },
        activeIndex: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        ...mapMutations(['SETACTIVENUM', 'DELETECARDINFO']),
        changeActive() {
            this.SETACTIVENUM(this.activeIndex)
        },
        deleteInfo() {
            this.DELETECARDINFO(this.cardInfo.id)
        },
    },
}
</script>

<style scoped>
.item {
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
}
.active{
    box-shadow: 1px 1px 6px  rgba(0, 0, 0, 0.5), -2px -2px 4px #fff;
}
.opration {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}
.tag {
    position: absolute;
    top: 2%;
    left: 2%;
}
</style>
